mock service worker
概要
フロント開発はAPI無しには語れねぇ。。。
開発時に実際のサーバーまでAPIを叩くわけにもいかなくて、モックAPIってのを用意しないとけいない。
そんな時に役立つのが通称MSW（mock service worker）というライブラリ。
（他にもjson-server, prismなど似たようなライブラリは存在してる。）
特徴
そのため、別プロセスでAPIモック用サーバーを立てることなく利用可能。
動作の仕組みとしては...
ブラウザからのfetchイベントを介してRequestを、Service Worker上でリッスンしておく。
（実際のドメインには通信させない）
Requestを受け取ったMSWは、設定されたモックレスポンスを返す。
ブラウザはモックレスポンスを受け取る。
インストール & 初期設定
1. インストール
$ yarn add msw -D
2. 公開ディレクトリ（まあ大概public/）にMSWのService Workerコードを追加する。
$ yarn run msw init public/ --save
使い方（開発環境などで常時利用したい場合）
1. モックAPIが使いたいなら、適宜定義していけばOK。利用する関数はsetupWorker, restあたり。
code: src/mocks/browser.js
// src/mocks/browser.js
import { setupWorker } from "msw";
import { handlers } from "./handlers";
// This configures a Service Worker with the given request handlers.
export const worker = setupWorker(...handlers);
code: src/mocks/handlers.js
import { rest } from "msw";
const TARGET_HOST = 'www.sample.com'
export const handlers = [
rest.get(https://${TARGET_HOST}/hoge,
(req, res, ctx) => {
return res(
ctx.status(200),
ctx.json({
word: "hogehoge",
count: 1
})
);
}
),
];
2. index.jsなど起動スクリプト上で、workerを起動する。
code: index.js
...
if (process.env.NODE_ENV === "development") {
const { worker } = require("./mocks/browser");
worker.start();
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
...
テストでAPIをモック化したい場合
テストしたい場合は、以下のテンプレに則っておけばOK
code: sample.js
import { rest } from "msw";
import { setupServer } from "msw/node";
const server = setupServer(handlers);
beforeAll(() => server.listen());
afterEach(() => {
server.resetHandlers();
});
afterAll(() => server.close());
ブラウザは立てないから、msw/nodeのとこからsetupServerをインポートしてる。
後は、テスト前にlisten、テスト後にcloseを行うこと。
setupWorkerとrestを使って、適宜そのテスト用に合わせてモックAPIを定義すればOK。
workerをスタートさせる必要は多分ない。
後は、serverが定義されてるなら、server.useというてもあり。
参考：